<template>
  <div class="notice-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          clearable
        />
        <el-input
          v-model="filter.title"
          placeholder="主题"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-select
          v-model="filter.status"
          placeholder="状态"
          style="width: 120px; margin-left: 10px"
          clearable
        >
          <el-option label="全部" value="" />
          <el-option label="通过" value="通过" />
          <el-option label="拒绝" value="拒绝" />
          <el-option label="待审核" value="待审核" />
        </el-select>
        <el-button type="primary" style="margin-left: 10px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button size="small" icon="el-icon-circle-plus" @click="handleAdd">新增</el-button>
        <el-button 
          size="small" 
          icon="el-icon-delete" 
          style="margin-left: 10px"
          :disabled="selection.length === 0"
          @click="handleDelete"
        >
          删除
        </el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        class="notice-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="title" label="主题" width="150"/>
        <el-table-column prop="date" label="发帖时间" width="120"/>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button 
              size="small" 
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="pagination-info">
        第1到{{ filteredData.length }}条，共{{ filteredData.length }}条记录。
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="编号" prop="id" v-if="isEdit">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="主题" prop="title">
          <el-input v-model="form.title" placeholder="请输入通知主题"></el-input>
        </el-form-item>
        <el-form-item label="发帖时间" prop="date">
          <el-date-picker
            v-model="form.date"
            type="datetime"
            placeholder="选择发帖时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="通过" value="通过"></el-option>
            <el-option label="拒绝" value="拒绝"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        id: '',
        title: '',
        status: ''
      },
      tableData: [
        {
          id: 7,
          title: '通知',
          date: '2020-02-09',
          status: '通过'
        },
        {
          id: 8,
          title: '紧急通知',
          date: '2020-05-12',
          status: '通过'
        },
        {
          id: 9,
          title: '系统维护通知',
          date: '2020-06-15',
          status: '待审核'
        },
        {
          id: 10,
          title: '会议取消通知',
          date: '2020-07-20',
          status: '拒绝'
        }
      ],
      selection: [], // 选中的行
      dialogVisible: false, // 对话框显示状态
      isEdit: false, // 是否为编辑模式
      dialogTitle: '', // 对话框标题
      form: {
        id: '',
        title: '',
        date: '',
        status: '待审核'
      },
      rules: {
        title: [
          { required: true, message: '请输入通知主题', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择发帖时间', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        return (
          (this.filter.id === '' || item.id.toString().includes(this.filter.id)) &&
          (this.filter.title === '' || item.title.includes(this.filter.title)) &&
          (this.filter.status === '' || item.status === this.filter.status)
        )
      })
    }
  },
  methods: {
    // 获取状态标签类型
    getStatusTagType(status) {
      switch (status) {
        case '通过': return 'success'
        case '拒绝': return 'danger'
        case '待审核': return 'warning'
        default: return 'info'
      }
    },
    
    // 处理选中行变化
    handleSelectionChange(val) {
      this.selection = val
    },
    
    // 搜索
    handleSearch() {
      // 计算属性 filteredData 会自动更新
      this.$message.success('搜索完成')
    },
    
    // 重置搜索
    resetSearch() {
      this.filter = {
        id: '',
        title: '',
        status: ''
      }
    },
    
    // 新增通知
    handleAdd() {
      this.dialogTitle = '新增通知'
      this.isEdit = false
      this.dialogVisible = true
    },
    
    // 删除选中项
    handleDelete() {
      this.$confirm('确定要删除选中的通知吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selection.map(item => item.id)
        this.tableData = this.tableData.filter(item => !ids.includes(item.id))
        this.$message.success('删除成功')
        this.selection = []
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 编辑通知
    handleEdit(row) {
      this.dialogTitle = '编辑通知'
      this.isEdit = true
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    
    // 通过通知
    handleApprove(row) {
      row.status = '通过'
      this.$message.success('操作成功')
    },
    
    // 拒绝通知
    handleReject(row) {
      row.status = '拒绝'
      this.$message.success('操作成功')
    },
    
    // 对话框关闭
    handleDialogClosed() {
      this.$refs.form.resetFields()
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            // 编辑模式 - 更新数据
            const index = this.tableData.findIndex(item => item.id === this.form.id)
            if (index !== -1) {
              this.tableData.splice(index, 1, {...this.form})
              this.$message.success('修改成功')
            }
          } else {
            // 新增模式 - 添加数据
            const newId = this.tableData.length > 0 
              ? Math.max(...this.tableData.map(item => item.id)) + 1 
              : 1
            this.tableData.unshift({
              ...this.form,
              id: newId
            })
            this.$message.success('新增成功')
          }
          this.dialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.notice-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-item {
  margin-left: 10px;
}

.action-buttons {
  margin-bottom: 15px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}

.el-link {
  font-size: 13px;
}

/* 复选框样式调整 */
.el-table__header .el-checkbox__inner {
  border-radius: 2px;
}

.el-icon-circle-plus {
  margin-right: 5px;
}

/* 操作按钮间距调整 */
.el-table .el-button {
  margin: 2px;
  padding: 7px 10px;
}

/* 对话框表单样式 */
.el-form-item {
  margin-bottom: 20px;
}
</style>